<template>
	<view>
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff">
			<swiper-item style="height: 187px;" v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.imgUrl" style="height: 187px;" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cu-bar server-tab">
			<view class="action border-title" @click="typeClick(1)">
				<text class="text-xl" :class="typeIndex==1?'text-orange':''">国内服务</text>
				<text class="bg-c" :class="typeIndex==1?'bg-orange':''" style="width:2rem"></text>
			</view>
			<view class="action border-title" @click="typeClick(2)">
				<text class="text-xl" :class="typeIndex==2?'text-orange':''">国际服务</text>
				<text class="bg-c" :class="typeIndex==2?'bg-orange':''" style="width:2rem"></text>
			</view>
		</view>
		<view class="tg-nav padding" style="margin-top: 50rpx;">
			<view class="action" style="padding-top: 10rpx;">
				<text class="icon" style="background-image: url('');"></text>
				<view class="text-xl" style="display: inline-block;">普通接送<text class="cuIcon-title text-red"></text><text class="text-red">导游专用</text></view>
			</view>
			<view class="flex">
				<view class="flex-sub w-left" @click="goOrder(1)" style="padding-right: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">接机服务</view>
					</view>
				</view>
				<view class="flex-sub w-right" @click="goOrder(2)" style="padding-left: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">送机服务</view>
					</view>
				</view>
			</view>
			<view class="action">
				<text class="icon" style="background-image: url('');"></text>
				<text class="text-xl">VIP接送</text>
			</view>
			<view class="flex">
				<view class="flex-sub w-left" @click="goOrder(3)" style="padding-right: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">接机服务</view>
					</view>
				</view>
				<view class="flex-sub w-right" @click="goOrder(4)" style="padding-left: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">送机服务</view>
					</view>
				</view>
			</view>
			<view class="action">
				<text class="icon" style="background-image: url('');"></text>
				<text class="text-xl">登机口接送</text>
			</view>
			<view class="flex">
				<view class="flex-sub w-left" @click="goOrder(5)" style="padding-right: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">接机服务</view>
					</view>
				</view>
				<view class="flex-sub w-right" @click="goOrder(6)" style="padding-left: 10rpx;">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">送机服务</view>
					</view>
				</view>
			</view>
			<view class="action">
				<text class="icon" style="background-image: url('');"></text>
				<text class="text-xl">快速通道</text>
			</view>
			<view class="flex">
				<view class="flex-sub w100" @click="goOrder(7)">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">{{checkName}}</view>
					</view>
				</view>
				<view class="flex-sub"></view>
			</view>
			<view class="action">
				<text class="icon" style="background-image: url('');"></text>
				<text class="text-xl">休息室</text>
			</view>
			<view class="flex">
				<view class="flex-sub w100" @click="goOrder(8)">
					<view class="nav-li" style="background-image: url('');">
						<view class="nav-title">贵宾休息室</view>
					</view>
				</view>
				<view class="flex-sub"></view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title:'国内服务',
				checkName:'安检快速通道',
				typeIndex:1,
				cardCur: 0,
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				baseurl: '',
				isxl: false
			};
		},
		onLoad() {
			// if(!this.hasLogin){
			// 	uni.navigateTo({
			// 		url: '/pages/account/login'
			// 	})
			// }
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'user'])
		},
		onReachBottom() {
			//console.log('onReachBottom');
		},
		onPullDownRefresh() {
			if(!this.hasLogin){
				uni.navigateTo({
					url: '/pages/account/login'
				})
			}else{
				this.isxl = true;
				this.loadData();
			}
		},
		methods: {
			goOrder(v){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/account/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/index?types='+this.typeIndex+'&mold='+v+'&title='+this.title
					})
				}
			},
			typeClick(t){
				if(t==1){
					this.title='国内服务';
				}else{
					this.title='国际服务';
				}
				this.checkName=t==1?'安检快速通道':'联检快速通道';
				this.typeIndex=t;
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			async loadData() {
				let that = this;
				this.$api.ajax('index/init', {}, function(res) {
					if (that.isxl) {
						that.isxl = false;
						uni.stopPullDownRefresh();
					} else {
						uni.hideLoading();
					}
					var data = res[1].data;
					if (data.statusCode == 200) {
						for(let i=0; i<data.data.length; i++){
							data.data[i].imgUrl=that.$url+data.data[i].imgUrl;
						}
						that.swiperList = data.data;
					} else {
						that.$api.msg('网络失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
	.server-tab{
		margin-top: 30rpx;
		-webkit-box-pack: inherit;
		-webkit-justify-content: inherit;
		justify-content: inherit;
		.action{
			margin-right: 40rpx;
		}
	}
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}
	
	.nav-li {
		padding:45upx 30upx;
		border-radius: 12upx;
		width: 100%;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		background-size: 100% 100%;
	}
	.w-left{
		    -webkit-flex-basis: 60%;
		    flex-basis: 60%;
	}
	.w-right{
		-webkit-flex-basis: 40%;
		flex-basis: 40%;
	}
	.w100{
		-webkit-flex-basis: 100%;
		flex-basis: 100%;
	}
	.nav-title {
		font-size: 30upx;
		font-weight: 300;
	}
	
	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}
	
	
	.card-swiper swiper-item {
		padding: 20rpx 0rpx 70rpx;
	}

	.card-swiper swiper-dots {
		bottom: 30px;
		right: 20px;
	}
	.tg-type{
		
		.cu-btn{
			width:50%;
		}
		.cu-btn.lg{
			height: 90rpx;
		}
		.btn1{
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		.btn2{
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
	}
	.tg-nav{
		.text-xl{
			font-size: 32rpx;
		}
		.action{
			padding:40rpx 0px 20rpx 0;
			.icon{
				font-size: 23px;
				margin-right: 10px;
				width:40rpx;
				height: 40rpx;
				background-size: 100% 100%;
				display: inline-block;
				position: relative; 
				top: 4px;
			}
		}
	}
	.tg-nav.padding{
		padding:0rpx 30rpx;
	}
</style>
